import { Tabs, Col, Row, Spin } from 'antd';
import { FormattedMessage, connect, formatMessage } from 'umi';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import global from '@/global.less';
import classnames from 'classnames'
import { HeaderTop, HeaderFilter, CommentTitle, MyTable, GlobalDoughnut, HotMap, LineArea, Histogram } from './components'
import { joinDimensionField, formatterUnitOfData, selectModel } from '@/utils/utils'

const { TabPane } = Tabs;

const SaleWrapper = props => {
  const { dispatch, dataRow, chartType, modelData, params, dimension, unmountSign, nameSpace , commerBuild } = props
  const { isShowDateRange } = commerBuild
  const { areaRange, areaRank, numberRank, priceRank, amountRank, distinctSale = [], trend, amount = [] } = dataRow
  const { staticts, region, region_code, purpose, date, dateRange, seqRange, currentDate, currentDates, currentSeq, currentSeqs, defaultDate, tabKey } = modelData

  const [mapRef, setMapRef] = useState(null)
  useEffect(() => {
    if (distinctSale.length) {
      mapRef && mapRef.refreshMap()
    }
  }, [distinctSale, staticts])
  const dimensionName = chartType + staticts

  const dimensionMap = joinDimensionField(dimension, params.staticts)
  const fieldArr = dimensionMap[staticts] || []

  const rankDatdMap = { '面积': areaRank, '套数': numberRank, '金额': amountRank, '均价': priceRank }

  // 计算同比、环比
  const handRatio = data => {
    const value = (parseFloat(data) * 100).toFixed(1)
    return { value, unit: '%' }
  }
  // 行政区表格列信息
  const regionColumns = [
    { name: '行政单位', dataIndex: 'region_name', width: '36%' },
    { name: dimensionName, dataIndex: fieldArr[0], width: '26%', render: (value) => formatterUnitOfData(staticts, value) },
    { name: '同比', dataIndex: fieldArr[1], render: (value) => handRatio(value) },
    { name: '环比', dataIndex: fieldArr[2], render: (value) => handRatio(value) }
  ]
  // 行政区表格列信息（无同比环比）
  const regionColumnsNoBisis = [
    { name: '行政单位', dataIndex: 'region_name', width: '36%' },
    { name: dimensionName, dataIndex: fieldArr[0], width: '26%', render: (value) => formatterUnitOfData(staticts, value) },
  ]

  // 预售排名表格列信息
  const rankColumns = [
    { name: '项目名', dataIndex: 'pre_name', width: '65%' },
    {
      name: dimensionName, dataIndex: fieldArr[0], width: '35%', render: (value) => formatterUnitOfData(staticts, value)
      // surfix: () => <span style={{ fontSize: '15px' }}> m<sup>2</sup></span>
    }
  ]
  return (
    <div className={classnames(global.visual, styles.preSale)}>
      <div className={global.visualLeft}>
        <HeaderTop topData={amount[0]} fieldArr={fieldArr} chartType={chartType} needings={{ region, staticts }} isShowDateRange={isShowDateRange}/>
        {/* 行政区预售信息 */}
        <div className={styles.region}>
          <CommentTitle title={`行政区${dimensionName}信息`} />
          <MyTable dataRow={distinctSale.sort((a, b) => b[fieldArr[0]] - a[fieldArr[0]])} columns={ !isShowDateRange ? regionColumns : regionColumnsNoBisis} />
        </div>
        {/* 半年预售趋势 */}
        <div className={styles.trend}>
          <CommentTitle title={`半年内${dimensionName}趋势图`} />
          <div className={styles.tableBody}>
            <LineArea dataRow={trend} valueName={fieldArr[0]} staticts={staticts}/>
          </div>
        </div>
      </div>

      <div className={global.visualCenter}>
        <HeaderFilter regionAble='4' isNewCreate={true} params={params} fetchType={chartType === '预售' ? 'preSale' : 'sale'} nameSpace={nameSpace} needings={{ purpose, staticts, date, region_code, dateRange, seqRange, currentDate, currentDates, currentSeq, currentSeqs, defaultDate, tabKey ,isShowDateRange }} />
        <HotMap onRef={ref => setMapRef(ref)} unmountSign={unmountSign} dataRow={distinctSale} fieldName={fieldArr[0]} region_code={region_code} tabKey={tabKey} nameSpace={nameSpace} />
      </div>

      <div className={global.visualRight}>
        {/* 预售面积段分布 */}
        <div className={styles.areaRange}>
          <CommentTitle title={`${chartType}面积段分布`} />
          <div className={styles.tableBody}>
            {(chartType === '销售' && staticts === '均价') ?
              <Histogram dataRow={areaRange} staticts={staticts} axisName="area_class" valueName={fieldArr[0]} /> :
              <GlobalDoughnut staticts={staticts} name={staticts} dataRow={areaRange} fieldName={fieldArr[0]} />
            }
          </div>
        </div>
        {/* 预售面积排名 */}
        <div className={styles.areaRank}>
          <CommentTitle title={`项目${dimensionName}排名TOP10`} />
          <MyTable dataRow={rankDatdMap[staticts]} columns={rankColumns} />
        </div>
      </div>
    </div>
  );
}

export default connect(({ commerBuild }) => ({
  commerBuild
}))(SaleWrapper);
